<template>
  <view class="chat-container">

    <!-- 消息列表（滚动区域） -->
    <scroll-view
        class="message-list"
        scroll-y
        :scroll-top="scrollTop"
        @scroll="onScroll"
        :scroll-with-animation="false"
    >
      <!-- 时间分割线 -->
      <view class="time-divider" v-if="showTimeDivider">
        <text>{{ formatTime(currentTime) }}</text>
      </view>

      <!-- 消息项（循环渲染） -->
      <view
          class="message-item"
          v-for="(msg, index) in messageList"
          :key="index"
          :class="{ 'self-message': msg.isSelf }"
      >
        <!-- 头像 -->
        <view class="avatar">
          <image
              :src="msg.senderAvatar"
              mode="widthFix"
              class="avatar-img"
          ></image>
        </view>

        <!-- 消息内容 -->
        <view class="message-content">
          <!-- 发送者昵称（群聊显示） -->
          <text class="sender-name" v-if="!msg.isSelf">{{ msg.senderName }}</text>

          <!-- 消息气泡 -->
          <view class="message-bubble" :class="{ 'self-bubble': msg.isSelf}">
            <text class="bubble-text">{{ msg.content }}</text>
          </view>

          <!-- 消息时间 -->
          <text class="message-time">{{ formatMsgTime(msg.sendTime) }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <uni-icons
          type="face"
          size="28"
          color="#666"
          class="input-icon"
      ></uni-icons>
      <textarea
          class="message-input"
          placeholder="输入消息..."
          v-model="inputContent"
          @input="autoResize"
          :height="inputHeight"
          @focus="onFocus"
          @blur="onBlur"
      ></textarea>
      <button
          class="send-btn"
          @click="sendMessage"
          :disabled="!inputContent.trim()"
      >
        发送
      </button>
    </view>
  </view>
</template>

<script>
import websocket from '@/utils/websocket';
import {addMessage, historyMessage} from "@/api/system/message";
export default {
  data() {
    return {
      // 消息列表（模拟数据）
      messageList: [

      ],
      inputContent: '', // 输入框内容
      inputHeight: 36, // 输入框高度（自适应）
      scrollTop: 0, // 滚动条位置（用于自动滚动到底部）
      showTimeDivider: true, // 是否显示时间分割线
      currentTime: Date.now() // 当前时间（用于分割线）
    };
  },
  onLoad() {
    // 页面加载时滚动到底部
    this.scrollToBottom();
    this.connectWebSocket();
  },
  methods: {
    // 连接WebSocket
    connectWebSocket() {
      let userId=this.$store.state.user.id
      // 构建连接地址（替换为你的后端地址）
      const wsUrl = `ws://119.29.117.29:8080/ws/group-chat/nalang/${userId}`;

      websocket.connect({
        url: wsUrl,
        // 接收消息回调
        onMessage: (data) => {
          // console.log('接收到消息------>：', data)

          //序列化
          var result = JSON.parse(data);
          if (result.senderId !== userId){
            this.messageList.push(result); // 将消息添加到列表
            this.getMessageList()
          }
          // 滚动到底部
          this.scrollToBottom();

        },
        // 连接成功回调
        onOpen: () => {

        },
        // 连接关闭回调
        onClose: () => {
        },
        // 连接错误回调
        onError: (err) => {

        }
      });

      // 保存回调（用于重连时复用）
      websocket.setCallbacks({
        onMessage: (data) => {
          this.messageList.push(data);
          this.scrollToBottom();
        },
        onOpen: () => {
          uni.showToast({ title: '重连成功', icon: 'success' });
        }
      });
    },
    // 格式化时间（分割线用）
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
    },

    // 格式化消息时间（消息后显示）
    formatMsgTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
    },

    // 输入框自适应高度
    autoResize(e) {
      const { height } = e.detail;
      // 限制最大高度
      this.inputHeight = height > 120 ? 120 : height;
    },

    // 发送消息
   async sendMessage() {
      const content = this.inputContent.trim();
      if (!content) return;
      // 构造新消息
      const newMsg = {
        groupId: 'nalang',
        content: content,
        senderId: this.$store.state.user.id,
        senderName: this.$store.state.user.name,
        senderAvatar: this.$store.state.user.avatar,
        sendTime: Date.now(),
        isSelf:true
      };
      // 添加到消息列表
      this.messageList.push(newMsg);
      // 清空输入框
      this.inputContent = '';
      // 重置输入框高度
      this.inputHeight = 36;
      // 滚动到底部
      this.scrollToBottom();
      //群发给别人
      const sendMsg = JSON.stringify(newMsg)
      websocket.send(sendMsg)

      //保存信息到数据库
       await  addMessage(newMsg)
       this.getMessageList()
    },

    // 滚动到底部
    async scrollToBottom() {
      this.$nextTick(() => {
        this.scrollTop = 999999; // 用一个大值强制滚动到底部
      });
      this.getMessageList()
    },

    async getMessageList() {
      let params={
        groupId:'nalang',
      }
      //加载历史消息
      const data=await historyMessage(params)
      data.forEach(item=>{
        if (Number(item.senderId)===this.$store.state.user.id){
          item.isSelf=true
        }else {
          item.isSelf=false
        }
      })
      this.messageList=data
    },

    // 监听滚动（用于判断是否显示回到顶部按钮等扩展功能）
    onScroll(e) {
      // console.log('滚动位置：', e.detail.scrollTop);
    },

    // 聚焦事件
    onFocus() {
      // 聚焦时自动滚动到底部（避免输入框挡住消息）
      this.scrollToBottom();
    },

    // 失焦事件
    onBlur() {},

    // 返回上一页
    navigateBack() {
      uni.navigateBack({ delta: 1 });
    },

    // 显示群信息
    showGroupInfo() {
      uni.navigateTo({ url: '/pages/chat/group-info' });
    }
  }
}
</script>

<style>
  /* 容器 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏 */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn, .info-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-name {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

/* 消息列表 */
.message-list {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

/* 时间分割线 */
.time-divider {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.time-divider text {
  font-size: 12px;
  color: #999;
  background-color: #e5e5e5;
  padding: 3px 10px;
  border-radius: 10px;
}

/* 消息项 */
.message-item {
  display: flex;
  margin-bottom: 15px;
  max-width: 85%;
}

/* 自己发送的消息（靠右） */
.self-message {
  flex-direction: row-reverse;
  margin-left: auto;
}

/* 头像 */
.avatar {
  margin-right: 10px;
  margin-top: 5px;
}

.self-message .avatar {
  margin-right: 0;
  margin-left: 10px;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

/* 消息内容 */
.message-content {
  display: flex;
  flex-direction: column;
}

/* 昵称（仅显示自己的） */
.nickname {
  font-size: 12px;
  color: #999;
  margin-bottom: 3px;
  margin-left: 5px;
}

/* 消息气泡 */
.message-bubble {
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.self-bubble {
  background-color: #95ec69;
}

/* 气泡小三角（可选） */
.message-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 8px solid #fff;
  border-bottom: 8px solid transparent;
}

.self-bubble::before {
  left: auto;
  right: -8px;
  border-right: none;
  border-left: 8px solid #95ec69;
}

.bubble-text {
  font-size: 16px;
  line-height: 1.5;
  word-break: break-all;
}

/* 消息时间 */
.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 3px;
  align-self: flex-end;
  margin-right: 5px;
}

.self-message .message-time {
  align-self: flex-start;
  margin-left: 5px;
}

/* 输入区域 */
.input-area {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.input-icon {
  margin-right: 10px;
}

.message-input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 10px;
  background-color: #f5f5f5;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
}

.send-btn {
  width: 60px;
  height: 36px;
  margin-left: 10px;
  background-color: #07c160;
  color: #fff;
  border-radius: 18px;
  font-size: 16px;
  line-height: 36px;
  padding: 0;
}

.send-btn:disabled {
  background-color: #ccc;
}
</style>
